<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
	<script src="../webapp/BootStrap/js/jquery.js"></script>
	<script src="../webapp/BootStrap/js/bootstrap.js"></script>
	<link rel="stylesheet" href="../webapp/BootStrap/css/bootstrap.css">
	<link rel="stylesheet" href="../webapp/static/css/login.css">
	<script src="../webapp/static/js/ZhengZe.js"></script>
	<script src="../webapp/static/layui/layui.js"></script>
	<link rel="stylesheet" href="../webapp/static/layui/css/layui.css">
</head>
<body style="background-color: #93C3CF">

<div class="login">
	<h1>欢迎来到陪护系统</h1>
	<h1>请登录</h1>
	<br/>
	<form method="post" action="/login/getlogin">
		<div class="input-group mb-3" style="width: 100%">
			<div class="input-group-prepend">
          <span class="input-group-text" id="phone">
            <svg  width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" name="zi_user" viewBox="0 0 2000 2000"><path d="M900 1099q123 0 227-59.5T1290.5 876q59.5-104 59.5-227t-59.5-226.5Q1231 319 1127 259t-227-60q-123 0-227 60T509.5 422.5Q450 526 450 649t59.5 227Q569 980 673 1039.5t227 59.5zm317 113h-60q-123 56-257 56t-257-56h-60q-126 0-235 63.5T175.5 1448Q112 1557 112 1683v148q0 71 49 120t120 49h1238q70 0 119.5-49t49.5-120v-148q0-126-63.5-235T1452 1275.5q-109-63.5-235-63.5z"/></svg>
          </span>
			</div>
			<input type="text" class="form-control" placeholder="请输入手机号" aria-label="phone" aria-describedby="phone" name="username">
		</div>

		<div class="input-group mb-3" style="width: 100%">
			<div class="input-group-prepend">
          <span class="input-group-text" id="password">
            <svg  width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" name="zi_keyboard" viewBox="0 0 2000 2000"><path d="M1644 506H158q-62 0-106 43Q9 593 9 655v891q0 62 43 106 44 43 106 43h1486q62 0 105-43 43-44 43-106V655q0-62-43-106-43-43-105-43zm25 1040q0 10-8 17-8 8-17 8H158q-10 0-17-8-8-7-8-17V655q0-10 8-17 7-8 17-8h1486q9 0 17 8 8 7 8 17v891zM387 879v-87q0-15-11-26t-26-11h-87q-16 0-26 11-11 11-11 26v87q0 15 11 26 10 11 26 11h87q15 0 26-11t11-26zm148 254v-87q0-15-10-26-11-11-27-11h-86q-16 0-27 11t-11 26v87q0 15 11 26t27 11h86q16 0 27-11 10-11 10-26zm149-254v-87q0-15-11-26t-26-11h-87q-15 0-26 11t-11 26v87q0 15 11 26t26 11h87q15 0 26-11t11-26zm588 544v-49q0-16-11-27-10-10-26-10H566q-15 0-26 10-11 11-11 27v49q0 16 11 27 11 10 26 10h669q16 0 26-10 11-11 11-27zm-439-290v-87q0-15-11-26t-27-11h-86q-16 0-27 11-10 11-10 26v87q0 15 10 26 11 11 27 11h86q16 0 27-11t11-26zm148-254v-87q0-15-11-26-10-11-26-11h-87q-15 0-26 11t-11 26v87q0 15 11 26t26 11h87q16 0 26-11 11-11 11-26zm149 254v-87q0-15-11-26t-26-11h-87q-15 0-26 11t-11 26v87q0 15 11 26t26 11h87q15 0 26-11t11-26zm148-254v-87q0-15-10-26-11-11-27-11h-86q-16 0-27 11t-11 26v87q0 15 11 26t27 11h86q16 0 27-11 10-11 10-26zm149 254v-87q0-15-11-26t-26-11h-87q-15 0-26 11t-11 26v87q0 15 11 26t26 11h87q15 0 26-11t11-26zm149-254v-87q0-15-11-26t-26-11h-87q-16 0-26 11-11 11-11 26v87q0 15 11 26 10 11 26 11h87q15 0 26-11t11-26z"/></svg>
          </span>
			</div>
			<input type="password" class="form-control" placeholder="请输入密码" aria-label="password" aria-describedby="password" name="password">
		</div>
		<span></span>
		<br/>
		<div class="btn-group" role="group" aria-label="Basic example">
			<button type="submit" class="btn btn-primary">登录</button>
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">注册</button>
		</div>
	</form>
</div>

<!-- 模态框 -->
<div class="modal fade modal-dialog" id="myModal">
	<form id="fom1">
	<div class="modal-dialog">
		<div class="modal-content">

			<!-- 模态框头部 -->
			<div class="modal-header">
				<h4 class="modal-title">新用户注册</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<!-- 模态框主体 -->
			<div class="modal-body">
					<div class="form-group">
						<label for="name">昵称:</label>
						<input type="text" class="form-control" id="name" placeholder="请输入昵称" required="required" name="username">
					</div>

					<div class="form-group">
						<label>性别:</label><br/>
					男:&nbsp;<input type="radio" checked name="usersex" value="1" id="q1">
					女:&nbsp;<input type="radio"  name="usersex" value="2" id="q2">
					</div>

					<div class="form-group">
						<label for="userphone">手机号码:</label>
						<input type="text" class="form-control" id="userphone" placeholder="请输入手机号码" required="required" name="userphone">
					</div>

					<div class="form-group">
						<label for="email">电子邮箱:</label>
						<input type="text" class="form-control" id="email" placeholder="请输入邮箱" required="required" name="useremail">
					</div>

					<div class="form-group">
						<label for="userpassword">密码:</label>
						<input type="password" class="form-control" id="userpassword" placeholder="请输入密码" required="required" name="userpassword">
					</div>
					<div class="form-group">
						<label for="userpassword2">在输入一次密码:</label>
						<input type="password" class="form-control" id="userpassword2" placeholder="在输入一次密码" required="required">
					</div>
			</div>

			<!-- 模态框底部 -->
			<div class="modal-footer">
				<input type="button" class="btn btn-primary" data-dismiss="modal" value="提交更改" onclick="submi()"/>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
			</div>

		</div>
	</div>
	</form>
</div>

</body>
</html>
<script>
	var layer;
	var flag = true

	//加载layer
	layui.use('layer',function () {
		layer = layui.layer;
	})

	//进行注册
	function submi(){
		let fom = $("#fom1").serialize()
		let userphone = $("#userphone").val()
		let email = $("#email").val()
		let p1 = $("#userpassword").val()
		let p2 = $("#userpassword2").val()

		flag = (p1 == p2)

		var re = /^1\d{10}$/
		flag = re.test(userphone)

		$("input[type=text]").each(function (i,item) {
			if(item.value == ""){
				flag = false;
				return false;
			}
		})

		var re2 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
		flag = re2.test(email)

		if(flag && p1 == p2 && re.test(userphone) && re2.test(email)) {
			$.ajax({
				url : "/login/insertuser",
				type : "post",
				datatype : "json",
				data : fom,
				sync : true,
				success : function (data) {
						if(data) {
							layer.msg("恭喜您,注册成功!")
						}else {
							layer.msg("对不起,注册失败!")
						}
				}
			})
		}else {
			layer.msg("输入有误,请重新输入!")
		}
	}

	//关闭模态框后清除数据
	$(function () {
		$('#myModal').on('hide.bs.modal', function (e) {
			$('#fom1')[0].reset();
			$("#q1").attr("checked",true)
			$("#q2").attr("checked",false)
		})
	})

</script>
